<template>
  <div class="icon-form">
    <a-popover trigger="hover" placement="bottom">
      <template #content>
        <div style="height: 300px; overflow: auto; width: 500px">
          <RenderIcon :value="icon" @click="handleClick" :copy="false">
          </RenderIcon>
        </div>
      </template>
      <a-input v-model:value="icon" placeholder="请输入图标">
        <template #prefix>
          <component :is="component" :name="component" v-if="component">
          </component>
        </template>
      </a-input>
    </a-popover>
  </div>
</template>
<script setup>
import { ref, defineEmits, defineProps, watch } from "vue";
import RenderIcon from "@/components/renderIcon";
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
});
const icon = ref(props.value);

const component = ref(props.value);

watch(
  () => props.value,
  (val) => {
    if (val !== icon.value) {
      icon.value = val;
      component.value = val;
    }
  }
);

const emit = defineEmits(["change", "update:value"]);

const handleClick = (e) => {
  icon.value = e;
  component.value = e;
  emit("change", e);
  emit("update:value", e);
};
</script>
<style lang='scss' scoped>
.icon-form {
  width: initial;

  :deep(.icon-form-popover) {
    width: initial;
    height: 300px;
    overflow: auto;
  }
}
</style>